@charset "UTF-8";
/**
 * @Description:样式表
 * @author Huisir
 * @create 2020年7月27日 17:52:25
 */
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  font-family: simhei;
  font-size: 20px;
  color: #fff;
  background-color: #081c4c;
  background-image: url(../img/bg.jpg);
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow: hidden; }

.container {
  width: 100vw;
  height: 33.75vw;
  padding: 2vw 3vw;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  position: relative; }
  .container p {
    color: #dcfffe;
    font-size: .8vw;
    margin: .5vh;
    text-align: center; }
    .container p span.light {
      color: #ffd200;
      font-size: 1.2vw; }
    .container p.h {
      font-weight: 700;
      color: #aaddff; }
      .container p.h.t {
        line-height: 1.8vw;
        height: 1.8vw;
        margin: 0; }
  .container .title {
    writing-mode: vertical-rl;
    letter-spacing: .5vw; }
  .container select {
    border-color: #225caa;
    background: transparent;
    color: #fff; }
    .container select option {
      background: #081c4c; }
  .container .solid {
    border: 0.2vw solid #225caa;
    box-shadow: inset 0 0 0.5vw 0.1vw #225caa;
    border-radius: .2vw;
    box-sizing: border-box;
    position: relative; }
  .container .dashed {
    border: 0.2vw dashed #225caa;
    box-sizing: border-box;
    border-radius: .2vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; }
  .container .arrow {
    background-image: url(../img/jiantou_01.png);
    position: absolute;
    width: 4vw;
    height: 2.2vw;
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 1; }
  .container > .jt {
    position: absolute;
    width: calc(94% - 3vw);
    height: calc(85% - 2vw);
    border-top: 0;
    border-left: 0;
    right: 1.4vw;
    bottom: .8vw;
    z-index: -1; }
    .container > .jt .line-1 {
      position: absolute;
      width: 1vw;
      height: 1vw;
      border-top: 0.2vw dashed #225caa;
      top: 0;
      right: 0; }
    .container > .jt .line-2 {
      position: absolute;
      width: 2vw;
      height: 1vw;
      border-left: 0.2vw dashed #225caa;
      bottom: 0;
      right: 8vw; }
    .container > .jt .line-3 {
      position: absolute;
      width: 2vw;
      height: 2.5vw;
      border-left: 0.2vw dashed #225caa;
      bottom: 0;
      left: 0; }
    .container > .jt img {
      position: absolute;
      width: 1.3vw;
      height: 1vw;
      bottom: 1.7vw;
      left: 0;
      transform: translateX(calc(-50% + .1vw)); }
  .container .part-1 {
    width: 10%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; }
    .container .part-1 > * {
      width: 100%; }
    .container .part-1 .box-t {
      height: 22%;
      display: flex;
      flex-direction: column;
      justify-content: center; }
      .container .part-1 .box-t .arrow {
        left: 50%;
        bottom: -2.5vw;
        transform: translateX(-50%) rotate(90deg); }
    .container .part-1 .box-b {
      height: 75%; }
      .container .part-1 .box-b .title {
        font-size: 1.6vw; }
      .container .part-1 .box-b img {
        width: auto;
        height: 60%; }
  .container .part-2 {
    width: 58%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; }
    .container .part-2 > * {
      width: 100%; }
    .container .part-2 .box-t {
      height: 67%;
      display: flex;
      justify-content: space-between; }
      .container .part-2 .box-t .item-l {
        width: 55%;
        height: 100%; }
        .container .part-2 .box-t .item-l .select {
          text-align: left;
          font-size: 1vw;
          height: 3.2vw;
          line-height: 3.2vw;
          padding-left: 2vw; }
          .container .part-2 .box-t .item-l .select select {
            font-size: 1vw;
            height: 1.8vw;
            padding: 0 1vw;
            width: 7vw; }
        .container .part-2 .box-t .item-l .b {
          height: calc(100% - 4vw);
          width: 100%; }
      .container .part-2 .box-t .item-r {
        width: 45%;
        height: 100%; }
        .container .part-2 .box-t .item-r .item {
          width: 100%;
          height: 50%;
          position: relative; }
        .container .part-2 .box-t .item-r #chart2::after {
          content: "采购金额";
          display: inline;
          font-size: .6vw;
          color: #dcfffe;
          position: absolute;
          top: 61%;
          left: 45%;
          transform: translateX(-50%); }
      .container .part-2 .box-t .arrow {
        top: 50%; }
        .container .part-2 .box-t .arrow.l {
          left: -3vw;
          transform: translateY(-50%) rotate(180deg); }
        .container .part-2 .box-t .arrow.r {
          right: -3vw;
          transform: translateY(-50%); }
    .container .part-2 .box-b {
      height: 30%;
      display: flex;
      justify-content: space-between; }
      .container .part-2 .box-b .item {
        width: 26.5%;
        height: 100%; }
        .container .part-2 .box-b .item.l-1 {
          width: 20.5%;
          display: flex;
          flex-direction: column;
          justify-content: center; }
      .container .part-2 .box-b .arrow {
        top: 50%; }
        .container .part-2 .box-b .arrow.l {
          left: -3vw;
          transform: translateY(-50%) rotate(180deg); }
        .container .part-2 .box-b .arrow.r {
          right: -3vw;
          transform: translateY(-50%); }
  .container .part-3 {
    width: 6%;
    height: 100%; }
    .container .part-3 .box {
      width: 100%;
      height: 100%; }
      .container .part-3 .box .title {
        font-size: 1.3vw; }
      .container .part-3 .box img {
        width: 30%;
        height: auto; }
  .container .part-4 {
    width: 19%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; }
    .container .part-4 > * {
      width: 100%; }
    .container .part-4 .box-t {
      height: 30%; }
      .container .part-4 .box-t .select {
        font-size: .5vw;
        position: absolute;
        top: 1.8vw;
        right: .5vw; }
        .container .part-4 .box-t .select select {
          font-size: .5vw;
          height: 1.2vw;
          padding: 0 .5vw;
          width: 5vw; }
      .container .part-4 .box-t .item {
        width: 100%;
        height: calc(100% - 1.8vw); }
      .container .part-4 .box-t .arrow {
        top: 50%;
        left: -3vw;
        transform: translateY(-50%) rotate(180deg); }
    .container .part-4 .box-b {
      height: 67%;
      display: flex;
      flex-direction: column;
      justify-content: center; }
      .container .part-4 .box-b .item {
        width: 100%;
        height: 50%;
        max-height: 10vw; }
        .container .part-4 .box-b .item .gysNum {
          display: flex;
          justify-content: space-around;
          height: calc(100% - 1.8vw); }
          .container .part-4 .box-b .item .gysNum > div {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center; }
            .container .part-4 .box-b .item .gysNum > div img {
              width: 4vw;
              height: auto; }
            .container .part-4 .box-b .item .gysNum > div p.h {
              font-weight: 400; }
            .container .part-4 .box-b .item .gysNum > div span.light {
              font-size: 1.5vw; }
      .container .part-4 .box-b .arrow {
        top: 50%;
        left: -3vw;
        transform: translateY(-50%) rotate(180deg); }
